<template>
  <!-- 小说编辑 -->
  <div class="clearfix" v-loading="loading">
    <el-row class="base_content_title">
      <el-col :span="24" class="content_title">
        <el-col :span="12">
          <HeadTitle></HeadTitle>
        </el-col>
        <el-col :span="12"></el-col>
      </el-col>
    </el-row>
    <el-col :span="24" class="content_edit pd_20" style="padding-top:20px;">
      <div id="diy-phone" style="margin-top:0">
        <div class="diy-phone-header">
          <i class="diy-phone-receiver"></i>
          <div class="diy-phone-title j-pagetitle"></div>
        </div>
        <div class="diy-phone-contain" id="j-materialPrev">
          <div class="materialPrePanel mgt20">
            <p>小说内容：</p>
            <div>
              <div class="single-summary" v-html="novel.content"></div>
            </div>
          </div>
        </div>
        <i class="diy-phone-footer"></i>
      </div>
      <div class="relative f_l floatBox-width" style="margin-left: 25px;position: relative;width:60%">
        <div class="black">
          <div class="add_con_form" style="padding-left: 25px;">
            <el-form label-width="90px" :model="novel" :rules="rules" ref="formLabelAlign">
              <el-form-item label="分类名称" prop="cid" label-width="100px">
                <el-col :span="12">
                  <el-input type="text" disabled clearable v-model="classify" autocomplete="off"></el-input>
                </el-col>
                <el-col :span="6" :offset="1">
                  <el-button :loading="$store.state.isLoading" type="primary" @click="class_show = true">添加</el-button>
                </el-col>
              </el-form-item>
            
              <el-form-item label="人物名称" prop="sid" label-width="100px">
                <el-col :span="12">
                  <el-input type="text" disabled clearable v-model="broad" autocomplete="off"></el-input>
                </el-col>
                <el-col :span="6" :offset="1">
                  <el-button :loading="$store.state.isLoading" type="primary" @click="broad_show = true">添加</el-button>
                </el-col>
              </el-form-item>
            
              <el-form-item label="标题：" prop="title" label-width="100px">
                <el-col :span="16">
                  <el-input type="text" clearable placeholder="请输入" v-model="novel.title" autocomplete="off"></el-input>
                </el-col>
              </el-form-item>
            
              <el-form-item label="标签：" prop="label" label-width="100px">
                <el-col :span="16">
                  <el-input type="text" clearable placeholder="多个标签请用@符号隔开" v-model="novel.label" autocomplete="off"></el-input>
                </el-col>
              </el-form-item>
            
              <el-form-item label="封面：" prop="piclink" label-width="100px">
                <el-col :span="12">
                  <el-input v-model="novel.piclink" autocomplete="off" disabled="disabled" class="mar_bottom_5"></el-input>
                  <uploadpic :piclink="novel.piclink" :width="300" :height="175" :is_more="false" @send_pic="get_pic"></uploadpic>
                </el-col>
              </el-form-item>
            
              <el-form-item label="价格：" prop="price" label-width="100px">
                <el-col :span="16">
                  <el-input type="text" clearable placeholder="请输入" v-model="novel.price" autocomplete="off"></el-input>
                </el-col>
              </el-form-item>
            
              <el-form-item label="成本价：" prop="cost" label-width="100px">
                <el-col :span="16">
                  <el-input type="text" clearable placeholder="请输入" v-model="novel.cost" autocomplete="off"></el-input>
                </el-col>
              </el-form-item>
            
              <el-form-item label="市场价：" prop="money" label-width="100px">
                <el-col :span="16">
                  <el-input type="text" clearable placeholder="请输入" v-model="novel.money" autocomplete="off"></el-input>
                </el-col>
              </el-form-item>
            
              <el-form-item label="内容简介：" prop="content" label-width="100px">
                <el-col :span="16">
                  <el-input type="textarea" :rows="12" clearable placeholder="请输入" v-model="novel.content" autocomplete="off"></el-input>
                </el-col>
              </el-form-item>
            
              <div v-if="$route.query.id">
                <el-form-item label="排序：" prop="sort" label-width="100px">
                  <el-col :span="16">
                    <el-input type="text" clearable placeholder="请输入" v-model="novel.sort" autocomplete="off"></el-input>
                  </el-col>
                </el-form-item>
            
                <el-form-item label="浏览量：" prop="pv" label-width="100px">
                  <el-col :span="16">
                    <el-input type="text" clearable placeholder="请输入" v-model="novel.pv" autocomplete="off"></el-input>
                  </el-col>
                </el-form-item>
            
                <el-form-item label="销量：" prop="sale" label-width="100px">
                  <el-col :span="16">
                    <el-input type="text" clearable placeholder="请输入" v-model="novel.sale" autocomplete="off"></el-input>
                  </el-col>
                </el-form-item>
            
                <el-form-item label="是否置顶：" prop="is_top" label-width="100px">
                  <el-col :span="2">
                    <el-switch v-model="novel.is_top" active-color="#13ce66" inactive-color="#999999" hone_switch :width="70"
                      active-value="1" inactive-value="0"></el-switch>
                  </el-col>
                </el-form-item>
            
                <el-form-item label="是否显示：" prop="show" label-width="100px">
                  <el-col :span="2">
                    <el-switch v-model="novel.show" active-color="#13ce66" inactive-color="#999999" hone_switch :width="70"
                      active-value="1" inactive-value="0"></el-switch>
                  </el-col>
                </el-form-item>
              </div>
            </el-form>
          </div>
        </div>
        <div class="submit_button">
          <el-col :span="24" class="tc">
            <el-button :loading="$store.state.isLoading" type="primary" @click="subForm('formLabelAlign')">保存</el-button>
          </el-col>
        </div>
        <!-- 小箭头 -->
        <i class="arrow arrow_out top150"></i>
      </div>
    </el-col>
    
    <el-dialog :close-on-click-modal="false" style="margin-top: 10px;" @close="class_show = false" title="选择分类"
      :append-to-body="true" :visible.sync="class_show">
      <selectNovel @classSelect="classSelect"></selectNovel>
    </el-dialog>
    
    <el-dialog :close-on-click-modal="false" style="margin-top: 10px;" @close="broad_show = false" title="选择播主"
      :append-to-body="true" :visible.sync="broad_show">
      <character @info="getInfo"></character>
    </el-dialog>
  </div>
</template>

<script>
  import uploadpic from "@/components/page/pic/up_pic";
  import selectNovel from "@/components/payment/select_novel.vue";
  import character from "@/components/shop/course/characterInfo.vue"
  import HeadTitle from "@/components/currency/HeadTitle.vue";
  export default {
    data() {
      return {
        novel: {
          cid: "",
          sid: "",
          title: "",
          label: "",
          piclink: "",
          price: "",
          cost: "",
          money: "",
          content: "",
          sort: "",
          pv: "",
          sale: "",
          is_top: "1",
          show: "1"
        },
        rules: {
          title: [{
            required: true,
            message: "请输入标题",
            trigger: "blur"
          }],
          cid: [{
            required: true,
            message: "请选择分类名称",
            trigger: "blur"
          }],
          sid: [{
            required: true,
            message: "请选择人物名称",
            trigger: "blur"
          }],
          piclink: [{
            required: true,
            message: "请选择封面图",
            trigger: "blur"
          }],
          price: [{
            required: true,
            message: "请输入价格",
            trigger: "blur"
          }],
          content: [{
            required: true,
            message: "请输入内容",
            trigger: "blur"
          }]
        },
        class_show: false, //显示分类
        broad_show: false, //显示播主
        classify: "", //分类名称
        broad: "" //播主名称
      }
    },
    components: {
      uploadpic,
      selectNovel,
      character,
      HeadTitle
    },
    methods: {
      getNovel() {
        //查看小说信息
        var id = this.$route.query.id;
        if (id) {
          this.$api.getNovel.getNovelById({
            id: id
          }).then(res => {
            if (res.data.code == 200) {
              this.novel = res.data.result;
              this.classify = res.data.result.cid_cn;//小说分类名称
              this.broad = res.data.result.nickname;//播主名称
            }
          })
        }
      },
      get_pic(pic) {
        this.novel.piclink = pic;
      },
      subForm(formName) {
        //保存
        this.$refs[formName].validate(valid => {
          if (valid) {
            if (this.$route.query.id) {
              //编辑
              this.$api.getNovel.editNovel(this.novel).then(res => {
                if (res.data.code == 200) {
                  this.$message.success("修改成功");
                  setTimeout(() => {
                    this.$router.push("/index/novel/novel_manage");
                  })
                }else{
                  this.$message.error(res.data.result);
                }
              })
            } else {
              this.$api.getNovel.addNovel(this.novel).then(res => {
                if (res.data.code == 200) {
                  this.$message.success("添加成功");
                  setTimeout(() => {
                    this.$router.push("/index/novel/novel_manage");
                  })
                }else{
                  this.$message.error(res.data.result);
                }
              })
            }
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      classSelect(row, bool) {
        //分类选择
        this.classify = row.title;
        this.novel.cid = row.id;
        this.class_show = bool;
      },
      getInfo(info, bool) {
        //获取人物信息
        this.novel.sid = info.id;
        this.broad = info.title;
        this.broad_show = bool;
      },
    },
    created() {
      this.getNovel();
    }
  }
</script>

<style lang="less" scoped>
  .novel_edit {
    margin: 30px;

    .title {
      margin-bottom: 20px;
      text-align: left;
    }
  }
</style>
